<template>
  <div class="emoji-main">
    <div class="emoji-ch flex-wrap flex-zy over-auto">
      <div class="emoji pd-6 hover-pointer" v-for="(item, index) in nowEmoji" :key="index" @click="chooseEmoji(item)">{{ item }}</div>
    </div>
    <div class="emoji-fa flex-center over-auto w-100">
      <div
        class="pd-zy-6 emoji-now hover-pointer"
        :class="nowKey === item.k ? 'is-active' : ''"
        v-for="(item, index) in emoji"
        :key="index"
        @click="upEmoji(item)">
        {{ item.k }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['choose']);

// 切换选项
const upEmoji = (item: any) => {
  nowKey.value = item.k;
  nowEmoji.value = item.v;
  let scrollDom = document.getElementsByClassName('emoji-ch')[0];
  scrollDom.scrollTop = 0;
};

// 返回所选
const chooseEmoji = (item: string) => {
  emit('choose', item);
};

const emoji = ref([
  {
    k: '😊',
    v: [
      '😀',
      '😃',
      '😄',
      '😁',
      '😆',
      '😅',
      '🤣',
      '😂',
      '🙂',
      '🙃',
      '😉',
      '😊',
      '😇',
      '🥰',
      '😍',
      '🤩',
      '😘',
      '😗',
      '☺️',
      '😚',
      '😙',
      '😋',
      '😛',
      '😜',
      '🤪',
      '😝',
      '🤑',
      '🤗',
      '🤭',
      '🤫',
      '🤔',
      '🤐',
      '🤨',
      '😐',
      '😑',
      '😶',
      '😏',
      '😒',
      '🙄',
      '😬',
      '🤥',
      '😌',
      '😔',
      '😪',
      '🤤',
      '😴',
      '😷',
      '🤒',
      '🤕',
      '🤢',
      '🤮',
      '🤧',
      '🥵',
      '🥶',
      '🥴',
      '😵',
      '🤯',
      '🤠',
      '🥳',
      '😎',
      '🤓',
      '🧐',
      '😕',
      '😟',
      '🙁',
      '☹️',
      '😮',
      '😯',
      '😲',
      '😳',
      '🥺',
      '😦',
      '😧',
      '😨',
      '😰',
      '😥',
      '😢',
      '😭',
      '😱',
      '😖',
      '😣',
      '😞',
      '😓',
      '😩',
      '😫',
      '😤',
      '😡',
      '😠',
      '🤬',
      '😈',
      '👿',
      '💀',
      '☠️',
      '💩',
      '🤡',
      '👹',
      '👺',
      '👻',
      '👽',
      '👾',
      '🤖',
      '😺',
      '😸',
      '😹',
      '😻',
      '😼',
      '😽',
      '🙀',
      '😿',
      '😾',
      '🙈',
      '🙉',
      '🙊',
      '💋',
      '💌',
      '💘',
      '💝',
      '💖',
      '💗',
      '💓',
      '💞',
      '💕',
      '💟',
      '❣️',
      '💔',
      '❤️',
      '🧡',
      '💛',
      '💚',
      '💙',
      '💜',
      '🖤',
      '💯',
      '💢',
      '💥',
      '💫',
      '💦',
      '💨',
      '🕳️',
      '💣',
      '💬',
      '👁️‍🗨️',
      '🗨️',
      '🗯️',
      '💭',
      '💤'
    ]
  },
  {
    k: '✌️',
    v: [
      '👋',
      '🤚',
      '🖐️',
      '✋',
      '🖖',
      '👌',
      '✌️',
      '🤞',
      '🤟',
      '🤘',
      '🤙',
      '👈',
      '👉',
      '👆',
      '🖕',
      '👇',
      '☝️',
      '👍',
      '👎',
      '✊',
      '👊',
      '🤛',
      '🤜',
      '👏',
      '🙌',
      '👐',
      '🤲',
      '🤝',
      '🙏',
      '✍️',
      '💅',
      '🤳',
      '💪',
      '🦵',
      '🦶',
      '👂',
      '👃',
      '🧠',
      '🦷',
      '🦴',
      '👀',
      '👁️',
      '👅',
      '👄',
      '👶',
      '🧒',
      '👦',
      '👧',
      '🧑',
      '👱',
      '👨',
      '🧔',
      '👨‍🦰',
      '👨‍🦱',
      '👨‍🦳',
      '👨‍🦲',
      '👩',
      '👩‍🦰',
      '👩‍🦱',
      '👩‍🦳',
      '👩‍🦲',
      '👱‍♀️',
      '👱‍♂️',
      '🧓',
      '👴',
      '👵',
      '🙍',
      '🙍‍♂️',
      '🙍‍♀️',
      '🙎',
      '🙎‍♂️',
      '🙎‍♀️',
      '🙅',
      '🙅‍♂️',
      '🙅‍♀️',
      '🙆',
      '🙆‍♂️',
      '🙆‍♀️',
      '💁',
      '💁‍♂️',
      '💁‍♀️',
      '🙋',
      '🙋‍♂️',
      '🙋‍♀️',
      '🙇',
      '🙇‍♂️',
      '🙇‍♀️',
      '🤦',
      '🤦‍♂️',
      '🤦‍♀️',
      '🤷',
      '🤷‍♂️',
      '🤷‍♀️',
      '👨‍⚕️',
      '👩‍⚕️',
      '👨‍🎓',
      '👩‍🎓',
      '👨‍🏫',
      '👩‍🏫',
      '👨‍⚖️',
      '👩‍⚖️',
      '👨‍🌾',
      '👩‍🌾',
      '👨‍🍳',
      '👩‍🍳',
      '👨‍🔧',
      '👩‍🔧',
      '👨‍🏭',
      '👩‍🏭',
      '👨‍💼',
      '👩‍💼',
      '👨‍🔬',
      '👩‍🔬',
      '👨‍💻',
      '👩‍💻',
      '👨‍🎤',
      '👩‍🎤',
      '👨‍🎨',
      '👩‍🎨',
      '👨‍✈️',
      '👩‍✈️',
      '👨‍🚀',
      '👩‍🚀',
      '👨‍🚒',
      '👩‍🚒',
      '👮',
      '👮‍♂️',
      '👮‍♀️',
      '🕵️',
      '🕵️‍♂️',
      '🕵️‍♀️',
      '💂',
      '💂‍♂️',
      '💂‍♀️',
      '👷',
      '👷‍♂️',
      '👷‍♀️',
      '🤴',
      '👸',
      '👳',
      '👳‍♂️',
      '👳‍♀️',
      '👲',
      '🧕',
      '🤵',
      '👰',
      '🤰',
      '🤱',
      '👼',
      '🎅',
      '🤶',
      '🦸',
      '🦸‍♂️',
      '🦸‍♀️',
      '🦹',
      '🦹‍♂️',
      '🦹‍♀️',
      '🧙',
      '🧙‍♂️',
      '🧙‍♀️',
      '🧚',
      '🧚‍♂️',
      '🧚‍♀️',
      '🧛',
      '🧛‍♂️',
      '🧛‍♀️',
      '🧜',
      '🧜‍♂️',
      '🧜‍♀️',
      '🧝',
      '🧝‍♂️',
      '🧝‍♀️',
      '🧞',
      '🧞‍♂️',
      '🧞‍♀️',
      '🧟',
      '🧟‍♂️',
      '🧟‍♀️',
      '💆',
      '💆‍♂️',
      '💆‍♀️',
      '💇',
      '💇‍♂️',
      '💇‍♀️',
      '🚶',
      '🚶‍♂️',
      '🚶‍♀️',
      '🏃',
      '🏃‍♂️',
      '🏃‍♀️',
      '💃',
      '🕺',
      '🕴️',
      '👯',
      '👯‍♂️',
      '👯‍♀️',
      '🧖',
      '🧖‍♂️',
      '🧖‍♀️',
      '🧗',
      '🧗‍♂️',
      '🧗‍♀️',
      '🤺',
      '🏇',
      '⛷️',
      '🏂',
      '🏌️',
      '🏌️‍♂️',
      '🏌️‍♀️',
      '🏄',
      '🏄‍♂️',
      '🏄‍♀️',
      '🚣',
      '🚣‍♂️',
      '🚣‍♀️',
      '🏊',
      '🏊‍♂️',
      '🏊‍♀️',
      '⛹️',
      '⛹️‍♂️',
      '⛹️‍♀️',
      '🏋️',
      '🏋️‍♂️',
      '🏋️‍♀️',
      '🚴',
      '🚴‍♂️',
      '🚴‍♀️',
      '🚵',
      '🚵‍♂️',
      '🚵‍♀️',
      '🤸',
      '🤸‍♂️',
      '🤸‍♀️',
      '🤼',
      '🤼‍♂️',
      '🤼‍♀️',
      '🤽',
      '🤽‍♂️',
      '🤽‍♀️',
      '🤾',
      '🤾‍♂️',
      '🤾‍♀️',
      '🤹',
      '🤹‍♂️',
      '🤹‍♀️',
      '🧘',
      '🧘‍♂️',
      '🧘‍♀️',
      '🛀',
      '🛌',
      '👭',
      '👫',
      '👬',
      '💏',
      '👩‍❤️‍💋‍👨',
      '👨‍❤️‍💋‍👨',
      '👩‍❤️‍💋‍👩',
      '💑',
      '👩‍❤️‍👨',
      '👨‍❤️‍👨',
      '👩‍❤️‍👩',
      '👪',
      '👨‍👩‍👦',
      '👨‍👩‍👧',
      '👨‍👩‍👧‍👦',
      '👨‍👩‍👦‍👦',
      '👨‍👩‍👧‍👧',
      '👨‍👨‍👦',
      '👨‍👨‍👧',
      '👨‍👨‍👧‍👦',
      '👨‍👨‍👦‍👦',
      '👨‍👨‍👧‍👧',
      '👩‍👩‍👦',
      '👩‍👩‍👧',
      '👩‍👩‍👧‍👦',
      '👩‍👩‍👦‍👦',
      '👩‍👩‍👧‍👧',
      '👨‍👦',
      '👨‍👦‍👦',
      '👨‍👧',
      '👨‍👧‍👦',
      '👨‍👧‍👧',
      '👩‍👦',
      '👩‍👦‍👦',
      '👩‍👧',
      '👩‍👧‍👦',
      '👩‍👧‍👧',
      '🗣️',
      '👤',
      '👥',
      '👣'
    ]
  },
  {
    k: '🐶',
    v: [
      '🐵',
      '🐒',
      '🦍',
      '🐶',
      '🐕',
      '🐩',
      '🐺',
      '🦊',
      '🦝',
      '🐱',
      '🐈',
      '🦁',
      '🐯',
      '🐅',
      '🐆',
      '🐴',
      '🐎',
      '🦄',
      '🦓',
      '🦌',
      '🐮',
      '🐂',
      '🐃',
      '🐄',
      '🐷',
      '🐖',
      '🐗',
      '🐽',
      '🐏',
      '🐑',
      '🐐',
      '🐪',
      '🐫',
      '🦙',
      '🦒',
      '🐘',
      '🦏',
      '🦛',
      '🐭',
      '🐁',
      '🐀',
      '🐹',
      '🐰',
      '🐇',
      '🐿️',
      '🦔',
      '🦇',
      '🐻',
      '🐨',
      '🐼',
      '🦘',
      '🦡',
      '🐾',
      '🦃',
      '🐔',
      '🐓',
      '🐣',
      '🐤',
      '🐥',
      '🐦',
      '🐧',
      '🕊️',
      '🦅',
      '🦆',
      '🦢',
      '🦉',
      '🦚',
      '🦜',
      '🐸',
      '🐊',
      '🐢',
      '🦎',
      '🐍',
      '🐲',
      '🐉',
      '🦕',
      '🦖',
      '🐳',
      '🐋',
      '🐬',
      '🐟',
      '🐠',
      '🐡',
      '🦈',
      '🐙',
      '🐚',
      '🐌',
      '🦋',
      '🐛',
      '🐜',
      '🐝',
      '🐞',
      '🦗',
      '🕷️',
      '🕸️',
      '🦂',
      '🦟',
      '🦠',
      '💐',
      '🌸',
      '💮',
      '🏵️',
      '🌹',
      '🥀',
      '🌺',
      '🌻',
      '🌼',
      '🌷',
      '🌱',
      '🌲',
      '🌳',
      '🌴',
      '🌵',
      '🌾',
      '🌿',
      '☘️',
      '🍀',
      '🍁',
      '🍂',
      '🍃'
    ]
  },
  {
    k: '🥦',
    v: [
      '🍇',
      '🍈',
      '🍉',
      '🍊',
      '🍋',
      '🍌',
      '🍍',
      '🥭',
      '🍎',
      '🍏',
      '🍐',
      '🍑',
      '🍒',
      '🍓',
      '🥝',
      '🍅',
      '🥥',
      '🥑',
      '🍆',
      '🥔',
      '🥕',
      '🌽',
      '🌶️',
      '🥒',
      '🥬',
      '🥦',
      '🍄',
      '🥜',
      '🌰',
      '🍞',
      '🥐',
      '🥖',
      '🥨',
      '🥯',
      '🥞',
      '🧀',
      '🍖',
      '🍗',
      '🥩',
      '🥓',
      '🍔',
      '🍟',
      '🍕',
      '🌭',
      '🥪',
      '🌮',
      '🌯',
      '🥙',
      '🥚',
      '🍳',
      '🥘',
      '🍲',
      '🥣',
      '🥗',
      '🍿',
      '🧂',
      '🥫',
      '🍱',
      '🍘',
      '🍙',
      '🍚',
      '🍛',
      '🍜',
      '🍝',
      '🍠',
      '🍢',
      '🍣',
      '🍤',
      '🍥',
      '🥮',
      '🍡',
      '🥟',
      '🥠',
      '🥡',
      '🦀',
      '🦞',
      '🦐',
      '🦑',
      '🍦',
      '🍧',
      '🍨',
      '🍩',
      '🍪',
      '🎂',
      '🍰',
      '🧁',
      '🥧',
      '🍫',
      '🍬',
      '🍭',
      '🍮',
      '🍯',
      '🍼',
      '🥛',
      '☕',
      '🍵',
      '🍶',
      '🍾',
      '🍷',
      '🍸',
      '🍹',
      '🍺',
      '🍻',
      '🥂',
      '🥃',
      '🥤',
      '🥢',
      '🍽️',
      '🍴',
      '🥄',
      '🔪',
      '🏺'
    ]
  },
  {
    k: '🌞',
    v: [
      '🌍',
      '🌎',
      '🌏',
      '🌐',
      '🗺️',
      '🗾',
      '🧭',
      '🏔️',
      '⛰️',
      '🌋',
      '🗻',
      '🏕️',
      '🏖️',
      '🏜️',
      '🏝️',
      '🏞️',
      '🏟️',
      '🏛️',
      '🏗️',
      '🧱',
      '🏘️',
      '🏚️',
      '🏠',
      '🏡',
      '🏢',
      '🏣',
      '🏤',
      '🏥',
      '🏦',
      '🏨',
      '🏩',
      '🏪',
      '🏫',
      '🏬',
      '🏭',
      '🏯',
      '🏰',
      '💒',
      '🗼',
      '🗽',
      '⛪',
      '🕌',
      '🕍',
      '⛩️',
      '🕋',
      '⛲',
      '⛺',
      '🌁',
      '🌃',
      '🏙️',
      '🌄',
      '🌅',
      '🌆',
      '🌇',
      '🌉',
      '♨️',
      '🎠',
      '🎡',
      '🎢',
      '💈',
      '🎪',
      '🚂',
      '🚃',
      '🚄',
      '🚅',
      '🚆',
      '🚇',
      '🚈',
      '🚉',
      '🚊',
      '🚝',
      '🚞',
      '🚋',
      '🚌',
      '🚍',
      '🚎',
      '🚐',
      '🚑',
      '🚒',
      '🚓',
      '🚔',
      '🚕',
      '🚖',
      '🚗',
      '🚘',
      '🚙',
      '🚚',
      '🚛',
      '🚜',
      '🏎️',
      '🏍️',
      '🛵',
      '🚲',
      '🛴',
      '🛹',
      '🚏',
      '🛣️',
      '🛤️',
      '🛢️',
      '⛽',
      '🚨',
      '🚥',
      '🚦',
      '🛑',
      '🚧',
      '⚓',
      '⛵',
      '🛶',
      '🚤',
      '🛳️',
      '⛴️',
      '🛥️',
      '🚢',
      '✈️',
      '🛩️',
      '🛫',
      '🛬',
      '💺',
      '🚁',
      '🚟',
      '🚠',
      '🚡',
      '🛰️',
      '🚀',
      '🛸',
      '🛎️',
      '🧳',
      '⌛',
      '⏳',
      '⌚',
      '⏰',
      '⏱️',
      '⏲️',
      '🕰️',
      '🕛',
      '🕧',
      '🕐',
      '🕜',
      '🕑',
      '🕝',
      '🕒',
      '🕞',
      '🕓',
      '🕟',
      '🕔',
      '🕠',
      '🕕',
      '🕡',
      '🕖',
      '🕢',
      '🕗',
      '🕣',
      '🕘',
      '🕤',
      '🕙',
      '🕥',
      '🕚',
      '🕦',
      '🌑',
      '🌒',
      '🌓',
      '🌔',
      '🌕',
      '🌖',
      '🌗',
      '🌘',
      '🌙',
      '🌚',
      '🌛',
      '🌜',
      '🌡️',
      '☀️',
      '🌝',
      '🌞',
      '⭐',
      '🌟',
      '🌠',
      '🌌',
      '☁️',
      '⛅',
      '⛈️',
      '🌤️',
      '🌥️',
      '🌦️',
      '🌧️',
      '🌨️',
      '🌩️',
      '🌪️',
      '🌫️',
      '🌬️',
      '🌀',
      '🌈',
      '🌂',
      '☂️',
      '☔',
      '⛱️',
      '⚡',
      '❄️',
      '☃️',
      '⛄',
      '☄️',
      '🔥',
      '💧',
      '🌊'
    ]
  }
]);
const nowKey = ref(emoji.value[0].k);
const nowEmoji = ref(emoji.value[0].v);
</script>

<style lang="scss" scoped>
.emoji-now {
  font-size: $px-20;
}
.emoji {
  font-size: $px-26;
}
.emoji:hover {
  background-color: #d09d7c;
}
.is-active {
  background-color: #ffccab;
}
.emoji-ch {
  height: $px-200;
  width: $px-360;
  background-color: #ffccab;
}
.emoji-fa {
  background-color: #f2a878;
}
.emoji-main {
  width: $px-360;
  background-color: #d09d7c;
  padding: $px-6;
}
</style>
